<template>
  <div class="elec-bg">
    <el-card class="elec-card" :body-style="{ padding: '20px' }">
      <template #header>
        <span class="card-title">仿真任务列表</span>
      </template>
      
      <el-table v-loading="loading" :data="infoList" border :key="selectedId">
        <el-table-column label="ID" width="55" align="center">
          <template #default="{ row }">
            <el-radio :label="row.env_param_id" v-model="selectedId" @click="handleRadioClick(row.env_param_id)" />
          </template>
        </el-table-column>
        <el-table-column label="环境参数名" align="center" prop="name" />
        <el-table-column label="电池" align="center" prop="battery.battery_name" />
        <el-table-column label="电价1" align="center" prop="prices[0].price_name" />
        <el-table-column label="电价2" align="center" prop="prices[1].price_name" />
        <el-table-column label="电价3" align="center" prop="prices[2].price_name" />
        <el-table-column label="参数1" align="center" prop="parameters[0].parameter_name" />
        <el-table-column label="参数2" align="center" prop="parameters[1].parameter_name" />
        <el-table-column label="参数3" align="center" prop="parameters[3].parameter_name" />
        <el-table-column label="参数4" align="center" prop="parameters[4].parameter_name" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" class="icon-btn">
            <Delete /> 删除
          </el-button>
        </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="startSimulate" :disabled="!selectedId" class="start-sim-btn">
          开始仿真
      </el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import { getParameterRecord, deleteParameterRecord } from "../api/system/parameter.js";
import { addSimulate } from "../api/system/simulate.js";
// 状态管理
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const infoList = ref([]);
const selectedRow = ref(null);
const selectedId = ref(null);

// 获取数据列表
const getList = async () => {
  loading.value = true;
  try {
    const res = await getParameterRecord();
    infoList.value = res.data.data || [];
  } catch (error) {
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};

// 多选框选中变化
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.priceId);
  multiple.value = !selection.length;
};
const startSimulate = async () => {
  try {
    const { value } = await ElMessageBox.prompt('请输入仿真名', '仿真名称', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/,
      inputErrorMessage: '仿真名不能为空',
      inputValue: '仿真名称' + new Date().getTime()
    });
    const requestBody = { env_param_id: selectedId.value, name: value };
    const res = await addSimulate(requestBody);

    const params = { env_param_id: selectedId.value, simulation_id: res.data.data.simulation_id, isHistory:false };
    const queryString = new URLSearchParams(params).toString();

    //TODO 需要修改为大屏端口
    const url = `http://localhost:8080?${queryString}`;
    window.open(url, '_blank');

  } catch {
    // 用户取消，无需处理
  }
};
// 删除操作
const handleDelete = async (row) => {
  const id = row.env_param_id;
  console.log(id);
  try {
    await deleteParameterRecord(id);
    ElMessage.success('删除成功');
    getList();
  } catch (error) {
    ElMessage.error('删除失败: ' + (error.message || '未知错误'));
  }
};

function handleRadioChange(row) {
  selectedRow.value = row;
}

function handleRadioClick(id) {
  single.value = false;
  if (selectedId.value === id) {
    single.value = true;
    selectedId.value = null;
  }
}

// 页面加载时获取数据
onMounted(() => {
  getList();
});
</script>

<style scoped>
.elec-bg {
  min-height: 100vh;
  background-color: #f9fbfd;
  color: #222;
  font-family: Arial, sans-serif;
  padding: 20px 0;
}

.elec-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #d1d7dc;
  margin: 20px auto;
  box-shadow: 0 2px 8px rgba(90, 150, 255, 0.08);
  max-width: 1400px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #1976d2;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-icon) {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
}

:deep(svg) {
  width: 14px !important;
  height: 14px !important;
  vertical-align: middle;
  text-align: center;
}

.start-sim-btn {
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
  margin-top: 10px;
  transition: all 0.2s;
}
.start-sim-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.18);
  transform: translateY(-2px);
}
.start-sim-btn:disabled {
  background: #e0e0e0 !important;
  color: #aaa !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
</style>